<template>
  <div class="pad-out-box">
    <el-table :border="true" :data="tableData" >
      <el-table-column label="设施类型" prop="dictKeyName" />
      <el-table-column label="设施名称" prop="dictValue" />
      <el-table-column align="center" label="操作" width="100px">
        <template slot-scope="scope">
          <el-button type="text" @click="addFn('update', scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination @change="pageChange" :total="total" />

    <el-dialog :title="dialog.type == 'update' ? '编辑' : '新增' + '设施'" :visible.sync="dialog.visible" width="60%" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form
        ref="dialogForm"
        :model="dialog.model"
        :rules="dialog.rules"
        label-width="180px"
        size="small"
        label-position="right">
        <el-row>
          <el-col :span="24">
            <el-form-item label="设施名称" prop="dictValue">
              <el-input placeholder="请输入" v-model="dialog.model.dictValue" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addFn">取消</el-button>
        <el-button size="small" type="primary" @click="handleSave">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { apiProjectConfigList, apiInsertProjectConfig, apiUpdateProjectConfig, apiProjectConfigDetail, apiProjectConfigDelete } from '../../api/projectConfig';
  export default {
    data() {
      return {
        tableData: [],
        total: 0,
        pageSize: 10,
        currentPage: 1,

        dialog: {
          visible: false,
          type: "",
          model: {
            dictType: 'station_type',
            dictValue: ''
          },
          rules: {
            dictValue: [{ required: true, message: "请输入设施名称", trigger: ['blur'] }]
          },
        }
      };
    },

    mounted() {
      this.getTableData();
    },

    methods: {
      //数据源
      async getTableData(type) {
        let res = await apiProjectConfigList({
          pageSize: this.pageSize,
          currentPage: type ? this.currentPage : 1,
          dictType: 'station_type'
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },
      //分页
      pageChange(e) {
        this.currentPage = e.currentPage;
        this.pageSize = e.pageSize;
        this.getTableData('more');
      },
      addFn (type = "create", model) {
        this.dialog.visible = !this.dialog.visible;

        this.dialog.type = type;
        if (this.dialog.visible) {
          if (model) {
            this.dialog.model = {
              ...this.dialog.model,
              ...model,
            };
          } else {
            this.dialog.model = {
              dictType: 'station_type',
              dictValue: ''
            };
          }
        }
        this.$nextTick(() => {
          if (this.dialog.visible) {
            this.$refs.dialogForm.clearValidate();
          }
        })
      },
      async handleSave () {
        await this.$refs.dialogForm.validate();

        this.dialog.model.primaryKey ? await apiUpdateProjectConfig(this.dialog.model) : await apiInsertProjectConfig(this.dialog.model)

        this.$message.success('保存成功！')
        this.dialog.visible = false;
        if (this.dialog.model.primaryKey) {
          this.getTableData('more')
        } else {
          this.getTableData()
        }
      }
    },
  };
</script>
<style scoped>
</style>
